<template>
	<view class="box">
		<!-- 步骤条 -->
		<view class="set-1">
			<view class="set-2" :key="index" v-for="(item,index) in options">
				<view class="setp">
					<view class="heng">

					</view>
					<view class="icon">
						<image src="/static/images/dietitian/times.png" mode="aspectFit"></image>
					</view>
					<view class="heng">

					</view>
				</view>
				<view class="" style="display: flex;
		align-items: center;			flex: 1;">
					<text class="set2-test font30 fontw">{{item.time}}</text>
					<view class="set-view">
						<view class="set-view-test">
							<view class="set-view-test1 font24 fontw">{{item.name}}</view>
							<view class="set-view-test2 font18">预约人：{{item.person}}</view>
						</view>
						<view class="btn font26">
							收款码
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			options: Array, //数据
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.box {}

	.set-2:last-child::after {
		display: none;
	}

	.set2-test {
		color: #333333;
		margin: 0 39rpx 0 35rpx;
	}

	.set-1 {
		padding: 0 26rpx 0 42rpx;
	}

	.set-2 {
		display: flex;
		align-items: flex-start;


		.setp {
			display: flex;
			flex-direction: column;
			align-items: center;

			.heng {
				height: 54rpx;
				width: 2rpx;
				background-color: #00000010;
			}

			.icon {
				width: 30rpx;
				height: 30rpx;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		.set-view {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 21rpx;
			padding: 38rpx 46rpx 26rpx 33rpx;
			margin-bottom: 14rpx;

			.set-view-test {
				.set-view-test1 {}

				.set-view-test2 {
					color: #666666;
				}
			}

			.btn {
				width: 133rpx;
				height: 52rpx;
				background: linear-gradient(0deg, #2AB883 0%, #89D894 100%);
				border-radius: 20rpx;
				color: #ffffff;
				line-height: 52rpx;
				text-align: center;
			}

			.set-view-test3 {
				width: 538rpx;
				margin: 0 auto;
				height: 32rpx;
				font-size: 26rpx;
				line-height: 32rpx;
				color: #959dad;
				margin-top: 26rpx;
			}

			.set-view-test4 {
				width: 538rpx;
				margin: 6rpx auto;
				display: flex;
				align-items: center;

				.set-zuo {
					width: 70%;
					height: 32rpx;
					font-size: 12px;
					line-height: 32rpx;
					color: #959dad;
				}

				.set-you {
					width: 30%;
					text-align: right;
					height: 42rpx;
					font-size: 32rpx;
					line-height: 42rpx;
					color: #3497fd;
					text-decoration: underline;
				}
			}
		}
	}


	// .set-2::after {
	// 	content: '';
	// 	/* 必须存在如果没有图标就留空 */
	// 	top: 24%;
	// 	/* 定位 距离*/
	// 	border-style: dotted;
	// 	border-left: 1px;
	// 	/* 横线颜色 */
	// 	border-color: #78849e;
	// 	left: -82upx;
	// 	/* 定位 距离*/
	// 	height: 90%;
	// 	/* 高度 */
	// 	position: absolute;
	// 	/* 定位 */
	// }

	// .set-2::before {
	// 	content: "";
	// 	/* 必须存在如果没有图标就留空 */
	// 	background: url(../../static/logo.png) no-repeat;
	// 	background-size: 66rpx 66rpx;
	// 	width: 66rpx;
	// 	height: 66rpx;
	// 	position: absolute;
	// 	/* 定位 */
	// 	left: -108upx;
	// 	/* 移动到左边 */
	// 	font-weight: bold;
	// 	/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	// 	font-family: "iconfont" !important;
	// 	/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	// 	font-size: 54upx;
	// 	/* 图标大小 */
	// 	font-style: normal;
	// 	/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	// 	-webkit-font-smoothing: antialiased;
	// 	/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	// 	-moz-osx-font-smoothing: grayscale;
	// 	/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	// }
</style>